import React from 'react';
import style from './file.less';
import {useSelector,useDispatch} from 'umi';
import {useEffect,useState} from 'react';
import { Input,Button,Pagination,Image,Drawer,Popconfirm} from 'antd';
import {FileListItem} from '../../utils/file';

const File:React.FC = () => {

 let indexModu = useSelector(state=>state.file);
 console.log(indexModu)
let dispatch = useDispatch(100);
const [page,setPage]=useState(1);
const [originalname,setOriginalname] = useState('');
const [type,setType] = useState('');
const [ visible,setVisible] = useState(false);
const [indexModuArr,setindexModuArr] = useState([])
const [fl,setFl] = useState(true);

useEffect(()=>{
   dispatch({
     type:'file/fileList',
     payload:{
         page,
     }
   })
},[page])

// useEffect(() => {
// }, [indexModuArrDeleteId])

//改变页码
function onChange(page:number) {
  setPage(page)
}
//获取输入框的值
function funType(){
  dispatch({
    type:'file/fileList',
    payload:{
        page,
        originalname,
        type
    }

  })
  console.log(originalname,type)
}
//点击出现弹框

function funyMidle(id:string){
 let indexModuObj = indexModu.fileLists.data[0].find((item:FileListItem)=>{
    return item.id==id
  })
   setindexModuArr(indexModuObj)
   setVisible(true)
}

  function onClose(){
    setVisible(false)
};

//图片预览
function ImageDemo() {
  return (
    <Image
      width={600}
      height={360}
      src={indexModuArr.url}
    />
  );
}
//确认删除
function onConfirm(){
  dispatch({
    type:'file/fileDelete',
    payload:{
      indexModuArr:indexModuArr.id,
    }
  })

}

    return <div className={style.File}>
          <div className={style.fileTop}>
            <div className={style.fileTopOne}>
            <div><span>文件名称:</span><Input placeholder="请输入文件名称" value={originalname} className={style.inpts} onChange={(e)=>{
                  e.stopPropagation();
                  setOriginalname(e.target.value)
            }}/></div>
            <div><span>文件类型:</span><Input  placeholder="请输入文件类型" value={type} className={style.inpts} onChange={(e)=>{
                setType(e.target.value)
            }}/></div>
            </div>
            <div  className={style.fileTopTwo}>
              <div>
             <Button type="primary" className={style.bnts} onClick={()=>{
                  funType()
             }}>
                 搜索
             </Button>
             <Button className={style.bnts} onClick={()=>{
               setOriginalname('');
               setType('')
             }}>重置</Button>
              </div>
            </div>
          </div>

          <div className={style.fileTable}>
             {
             indexModu.fileLists && indexModu.fileLists.data[0].map((item:FileListItem,index:number)=>{
                 return <div key={index+'aa'} className={style.fileTableItem} onClick={()=>{
                         funyMidle(item.id);
                 }}>
                    <img src={item.url} alt="" />
                    <div className={style.fileItemOriginalname}>{item.originalname}</div>
                    <div className={style.fileItemCreateAt}>上传于{item.createAt}</div>
                 </div>
               })
             }
          </div>

          <div className={style.fileBottom}>
           { indexModu.fileLists && <Pagination defaultCurrent={1} total={indexModu.fileLists.data[1]}
           defaultPageSize={12}
           onChange={(page)=>{
            onChange(page)
           }}
           className={style.fileBottomPage}/>}
          </div>

          <div className={style.fileLog}></div>

      <div className={style.modalBox}>

        <Drawer
          title="文件信息"
          width={600}
          visible={visible}
          bodyStyle={{ paddingBottom: 80 }}
          maskClosable={fl}
          zIndex={1000}
          onClose={onClose}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button onClick={()=>{
                   setVisible(false)
              }} style={{ marginRight: 8 }}>
                关闭
              </Button>
              <Popconfirm title="确认删除这个文件吗？" okText="确认" cancelText="取消"
              onConfirm={onConfirm}
              >
               <Button  type="primary">
                删除
              </Button>
              </Popconfirm>,
 
            </div>
          }
        >
             <div className={style.fileModals}>
             <div className={style.fileModals1}>
               <ImageDemo /> 

             <div className={style.fileModalBottom}>
                <div className={style.fileModalName}><span>文件名称：</span>{indexModuArr.originalname}</div>
                <div className={style.fileModalName}><span>存储路径：</span>{indexModuArr.filename}</div>
                <div className={style.fileModalType}>
                  <div><span>文件类型：</span>{indexModuArr.type}</div>
                  <div className={style.fileModalSize}><span>文件大小：</span>{indexModuArr.size}</div>
                </div>
                <div className={style.fileModalVisit}>
                  <span>访问链接：</span>  <div className={style.fileModalVisits}>{indexModuArr.url}</div>
                </div>
                <div className={style.fileModalCopy}>
                  复制
                </div>
             </div>
             </div>
          </div>
    
        </Drawer>
      </div>
    </div>
}

export default File;

